<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../favicon.ico">
    <title>线下抽奖程序</title>
    
    <link rel="stylesheet" type="text/css" href="../../../../assets/css/weui.css">
    
    <style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        /*font-size: 100%;*/
        /*background-color: #D30026;*/
        font-family: Tahoma, 'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
        /*font-size: 10px !important;*/
    }
    
    .christmas-poster {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: none;
    }
    
    .poster {
        height: 100%;
        width: 100%;
        border-style: none;
        display: none;
    }
    
    .my-header {
        color: white;
        font-size: larger;
        text-align: center;
    }
    
    .banner {
        width: 90%;
        margin:0.5rem auto 0.5rem auto;
    }
    
    .list-container {
        text-align: center;
/*        width: 100%;
        padding-left: 2%;
        padding-right: 2%;*/
    }
    
    .each-row {
        border-radius: 2px;
        background-color: #ededf1;
        border-width: 1px;
        
        /*width: 90%;*/
        height: 32px;
        margin:0 2% 6px 2%;
    }
    
    .button-container {
        
    }
    
    .page__bd_spacing {
        padding: 0 15px;
        margin: 0 4rem 2rem 4rem;
        
        
    }

    </style>
</head>

<body>
    <div style="text-align:center;"><img class="banner" src="../../../../assets/image/lottery/prize/top-banner.png" alt=""></div>

    <div class="list-container">
<!--         <div class="each-row" id="row1"></div>
        <div class="each-row" id="row2"></div>
        <div class="each-row" id="row3"></div>
        <div class="each-row" id="row4"></div>
        <div class="each-row" id="row5"></div>
        <div class="each-row" id="row6"></div>
        <div class="each-row" id="row7"></div>
        <div class="each-row" id="row8"></div>
        <div class="each-row" id="row9"></div>
        <div class="each-row" id="row10"></div> -->
    </div>


    

    <div class="weui-footer weui-footer_fixed-bottom" style="color: rgb(251, 187, 131)">
        <div class="page__bd page__bd_spacing">
            <a href="javascript:;" class="weui-btn weui-btn_plain-primary" style="color: #1aad19; font-size: 15px;">开 始</a>
        </div>

        <p class="weui-footer__text">Copyright © 1998-2016. All Rights Reserved.</p>
        <p class="weui-footer__text">松下电器（中国）有限公司 版权所有</p>
    </div>

    <div id="loadingToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据加载中</p>
        </div>
    </div>


    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script type="text/javascript">
    
        var $loadingToast = $('#loadingToast');
        
        var doNothing = function () {
            var data = {
                type : "GET", 
                url:'http://www.panasolan.com/pana-BE-RESTful/goto/japan/namelist/10',
                dataType: 'json',
                timeout:300000,
                success: function(data) {
                    
                    $loadingToast.fadeOut(100);
                    
                    console.log(data);
                    
                    var container = $(".list-container");
                    container.empty();
                    var order = 0;
                    for (each in data) {
                        order++;
                        container.append("<div class='each-row'>[" + (order) + "]" + data[each] + "</div>");
                    }
                    
                }
                
            };
            
            $.ajax(data);
        };
    
        $(".weui-btn").click(function () {
            
            $loadingToast.fadeIn(100);
            
            setTimeout(doNothing, 600);
            
            
            
            
            
            
        });
 
    </script>
</body>

</html>
